<template>
	<view >
		<view class='condition'>
			<u-row>
				<u-col span='4'>
					<view class='month' @click='showCalender = true'>{{month}}</view>
				</u-col>
				<u-col span='8'>
					<view style='text-align: right;font-size: 14px;color:#909399' >
						<view>
							总收入:￥{{addAmount}}
						</view>
						<view>
							总支出:￥{{reduceAmount}}
						</view>
					</view>
				</u-col>
			</u-row>
		</view>
		<view style='height: 20px;background-color: #fff;'></view>
		<u-datetime-picker :show="showCalender" v-model="startDateTime" mode="year-month" @confirm='chooseMonth'
			@close='showCalender = false' @cancel='showCalender = false'></u-datetime-picker>
		<view style='padding-top:50px;'>
			<view v-for='(day,index) in dateList' :key='index'>
				<view style='color:#909399;padding:10px;font-size:14px;background-color: #f3f3f3;'>
					<u-row>
						<u-col span='6'>
							<view style='font-size:18px;color:#606266;font-weight: bold;'>{{day.date}}</view>
						</u-col>
						<u-col span='5' @click='changeShow(index)'>
							<view style='text-align: right;padding-right:10px'>
								收入:￥{{day.addAmount.toFixed(2)}}
							</view>
							<view style='text-align: right;padding-right:10px'>
								支出:￥{{day.reduceAmount.toFixed(2)}}
							</view>
						</u-col>
						<u-col span='1' @click='changeShow(index)'>
							<view v-if='day.show'>
								<u-icon name="arrow-up" color='#909399'></u-icon>
							</view>
							<view v-else>
								<u-icon name="arrow-down" color='#909399'></u-icon>
							</view>
						</u-col>
					</u-row>
				</view>
				<u-line></u-line>
				<view v-if='day.show == true'>
					<view v-for='(item,itemKey) in logs[index]' :key='itemKey'>
						<view style='padding: 10px'>
							<u-row>
								<u-col span='6'>
									<view>
										<view style='color:#303133;font-weight: bold;'>{{types[item.type]}}</view>
										<view style='color:#606266;padding:5px 0px'>{{item.comment}}</view>
										<view style='color:#909399;font-size:14px'>
											{{$u.timeFormat(new Date(item.createdTime), 'mm月dd日 hh:MM')}}
										</view>
									</view>
								</u-col>
								<u-col span='6'>
									<view v-if='item.to.id == user' style='color:#19be6b;font-size:23px;text-align: right;'>
										+{{item.amount}}
									</view>
									<view v-if='item.from.id == user' style='color:#303133;font-size:23px;text-align: right;'>
										-{{item.amount}}
									</view>
								</u-col>
							</u-row>
						</view>
						<u-line></u-line>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				limit: 30,
				status: 'loadmore',
				month: '',
				showCalender: false,
				startDate: '',
				endDate: '',
				startDateTime: Number(new Date()),
				addAmount: 0,
				reduceAmount: 0,
				dateList: [],
				logs: [],
				dateListArray: [],
				user: 0,
				types: {
					'upload': '导入发放',
					'collect': '代发',
					'deposit': '结算',
					'transfer': '代收',
					'salary': '工资发放',
					'burn': '提现',
					'withdraw-fee': '订阅服务',
					'order-settle-leader': '队长提成',
					'order-settle-booking': '订台提成',
					'order-settle-subsidy': '下单补贴',
					'order-settle-salary': '工资日薪',
					'order-settle-royalties': '销售提成',
					'penalty-fee': '扣罚款项'
				}
			}
		},
		onReachBottom() {
			this.page++
			this.getTransactions()
		},
		onLoad() {
			this.request.get(`api/user`).then(res => {
				this.user = res.data.id
				let date = new Date()
				// this.startDateTime = Number(date)
				this.startDate = `${date.getFullYear()}/${date.getMonth() + 1}/01`
				this.endDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
				this.month = `${date.getFullYear()}年${date.getMonth() + 1}月`
				this.getTransactions()
			})
		},
		methods: {
			getTransactions() {
				uni.showLoading()
				let store = uni.getStorageSync('store')
				let filter =
					`entity.getCreatedTime() >= datetime.get('${this.startDate} 00:00:00') && entity.getCreatedTime() <= datetime.get('${this.endDate} 23:59:59') && entity.getType() != 'deposit-fee'`
				// 如果第一次搜索的，计算总收入
				if (this.page == 1) {
					this.request.get(`api/transactions`, {
						'@filter': filter + ` && entity.getTo().getId() == ${this.user}`,
						limit: 1,
						'@select': 'SUM(entity.amount) as amount',
					}).then((res) => {
						if (res.data.length > 0 && res.data[0].amount) {
							this.addAmount = parseFloat(res.data[0].amount).toFixed(2)
						} else {
							this.addAmount = 0
						}
					})
					this.request.get(`api/transactions`, {
						'@filter': filter + ` && entity.getFrom().getId() == ${this.user}`,
						limit: 1,
						'@select': 'SUM(entity.amount) as amount',
					}).then((res) => {
						if (res.data.length > 0 && res.data[0].amount) {
							this.reduceAmount = parseFloat(res.data[0].amount).toFixed(2)
						} else {
							this.reduceAmount = 0
						}
					})
				}
				this.request.get(`api/transactions`, {
					'@order': "entity.id|DESC",
					'@filter': filter,
					limit: this.limit,
					page: this.page
				}).then((res) => {
					console.log(res.data)
					if (res.data.length < this.limit) {
						this.status = 'nomore'
					}
					let dateList = this.dateListArray
					for (let i of res.data) {
						let date = new Date(i.createdTime)
						let theDate = `${date.getMonth() + 1}月${date.getDate()}日`
						// let theDate = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
						let index = dateList.indexOf(theDate)
						if (index == -1) {
							this.dateListArray.push(theDate)
							this.logs.push([i])
							if (i.to.id == this.user) {
								this.dateList.push({
									date: theDate,
									addAmount: parseFloat(i.amount),
									reduceAmount: 0,
									show: true
								})
							}
							if (i.from.id == this.user) {
								this.dateList.push({
									date: theDate,
									addAmount: 0,
									reduceAmount: parseFloat(i.amount),
									show: true
								})
							}

						} else {
							this.logs[index].push(i)
							if (i.from.id == this.user) {
								this.dateList[index].reduceAmount += parseFloat(i.amount)
							}
							if (i.to.id == this.user) {
								this.dateList[index].addAmount += parseFloat(i.amount)
							}
						}
					}
					console.log(this.dateList, this.logs)
					uni.hideLoading()
				})
			},
			chooseMonth(e) {
				let date = new Date(e.value)
				const nextDate = new Date(date.getTime() + 86400000)
				this.startDateTime = date.getTime()
				let year = date.getFullYear()
				let month = date.getMonth() + 1
				let lastDay = new Date(year, month, 0).getDate();
				this.month = `${year}年${month}月`
				this.startDate = `${year}/${month}/01`
				this.endDate = `${year}/${month}/${lastDay}`
				this.showCalender = false
				this.logs = []
				this.dateList = [],
					this.dateListArray = []
				this.page = 1
				this.status = 'loadmore'
				this.getTransactions()
			},
			changeShow(index){
				this.dateList[index].show = !this.dateList[index].show 
			},
		}
	}
</script>

<style>
	.condition {
		padding: 10px;
		background-color: #f3f3f3;
		position: fixed;
		width: 94%;
		top: 0px;
	}
</style>